<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>气象数据仪表盘</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f0f2f5;
        }

        .dashboard {
            width: 50%;
            max-width: 600px;
            padding: 2rem;
        }

        .data-card {
            display: flex;
            align-items: center;
            margin: 1rem 0;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            color: white;
            transition: transform 0.3s ease;
        }

        .data-card:hover {
            transform: translateY(-3px);
        }

        .icon {
            font-size: 2rem;
            margin-right: 1.5rem;
        }

        .content {
            flex-grow: 1;
        }

        .value {
            font-size: 2.2rem;
            font-weight: 300;
            margin-right: 0.5rem;
        }

        .unit {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        /* 差异化颜色方案 */
        .temperature { background: linear-gradient(135deg, #FF7F50, #FF6347) }
        .humidity { background: linear-gradient(135deg, #00BFFF, #1E90FF) }
        .data_pressure { background: linear-gradient(135deg, #b39f1d, #2E8B57) }
        .wind-direction { background: linear-gradient(135deg, #9370DB, #8A2BE2) }
        .wind-speed { background: linear-gradient(135deg, #FF4500, #FF0000) }
    </style>
</head>
<body>
    <div class="dashboard">
        <!-- 温度 -->
        <div class="data-card temperature">
            <i class="fas fa-thermometer-half icon"></i>
            <div class="content">
                <span class="value">23.5</span>
                <span class="unit">℃</span>
            </div>
        </div>

        <!-- 湿度 -->
        <div class="data-card humidity">
            <i class="fas fa-tint icon"></i>
            <div class="content">
                <span class="value">65</span>
                <span class="unit">%RH</span>
            </div>
        </div>

        <!-- 气压 -->
        <div class="data-card pressure">
            <i class="fas fa-tachometer-alt icon"></i>
            <div class="content">
                <span class="value">1013</span>
                <span class="unit">hPa</span>
            </div>
        </div>

        <!-- 风向 -->
        <div class="data-card wind-direction">
            <i class="fas fa-compass icon" style="transform: rotate(45deg)"></i>
            <div class="content">
                <span class="value">NE</span>
                <span class="unit">45°</span>
            </div>
        </div>

        <!-- 风速 -->
        <div class="data-card wind-speed">
            <i class="fas fa-wind icon"></i>
            <div class="content">
                <span class="value">3.2</span>
                <span class="unit">m/s</span>
            </div>
        </div>
    </div>

    <script>
        // 修改后的数据更新函数
        function updateData() {
            fetch('/api/weather')
                .then(response => response.json())
                .then(data => {
                    // 所有数值直接显示（无需toFixed处理）
                    document.querySelector('.temperature .value').textContent = data.temperature;
                    document.querySelector('.humidity .value').textContent = data.humidity;
                    document.querySelector('.data_pressure .value').textContent = data.data_pressure;
                    document.querySelector('.wind-speed .value').textContent = data.wind_speed;

                    // 风向处理
                    const windDirectionElement = document.querySelector('.wind-direction');
                    windDirectionElement.style.transform = `rotate(${data.wind_direction}deg)`;
                    windDirectionElement.textContent = getWindDirection(data.wind_direction);
                })
                .catch(error => console.error('Error:', error));
        }

        // 风向转换函数（保持原逻辑）
        function getWindDirection(degree) {
            const directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
            return directions[Math.round(degree / 45) % 8];
        }


        // 调整定时器为5秒刷新（根据需求调整）
        setInterval(updateData, 1000);
        updateData(); // 初始化加载
    </script>
</body>
</html>